<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!--   搜索     -->
        <el-form :inline="true" class="demo-form-inline">


          <el-form-item>
            <el-button type="primary" @click="searchProject">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-row>
          <el-button type="primary" @click="addProject">添加</el-button>
          <el-button type="primary" @click="refreshProjectList">刷新</el-button>
        </el-row>
        <el-table :data="projTableData.list" style="width: 100%">
          <el-table-column type="selection" width="55"/>
          <el-table-column type="expand">
            <template #default="props">
              <p> Appium Config</p>
              <el-table :data="props.row.appium_config">
                <el-table-column label="appActivity" prop="appActivity"/>
                <el-table-column label="appPackage" prop="appPackage"/>
                <el-table-column label="automationName" prop="automationName"/>
                <el-table-column label="platformName" prop="platformName"/>
                <el-table-column label="platformVersion" prop="platformVersion"/>

              </el-table>
            </template>
            <!--            <StepTable v-for="step in cases.list.steps" :steps="step"/>-->
          </el-table-column>
          <el-table-column property="name" label="name"/>
          <el-table-column property="description" label="description"/>
          <el-table-column property="last_updated_at" label="last_updated_at"/>

        </el-table>
      </el-main>
    </el-container>
  </div>
</template>


<script setup lang="ts">

import {showMsg, ShowType} from "@/plugin/message.ts";
import {onMounted, reactive} from "vue";
import {InitProjectList} from "@/type/project.ts";
import {apiGetProjects} from "@/request/sys/proj.ts";

const projTableData = reactive(new InitProjectList())

const getProjectList = async (params) => {
  const res = await apiGetProjects(params);
  projTableData.list = res.results;
  console.log("=========================")

  // todo 将api获取到的数据中appium_config转为列表，后续通过后端处理
  const el = []
  projTableData.list.forEach(item => {
    el.push(item.appium_config)
    item.appium_config = el
  })
  console.log(projTableData.list)
  console.log("=========================")
}
onMounted(
    () => {
      getProjectList({})
    }
)
const addProject = () => {
  showMsg(ShowType.Info, 'addProject')
};
const refreshProjectList = () => {
  showMsg(ShowType.Info, 'refreshProjectList')
};

const searchProject = () => {
  showMsg(ShowType.Info, 'searchProject')
}

</script>


<style scoped>

</style>